<template>
  <view class="ai-section" :class="size" :style="bgStyle">
    <view class="ai-section-decoration" v-if="type" :class="type"></view>
    <view class="ai-section-title-content" :class="size">
      <text class="content">{{title}}</text>
    </view>
  </view>
</template>

<script>
  /**
   * 分段
   * @description 通用分段
   * @property {String} type = [line|circle|square] 展示的类型
	 * 	@value line 竖线
	 * 	@value circle 圆形
	 * 	@value square 正方形
   * @property {String} title 主标题
   * @property {Boolean} bgTransparent 背景是否透明
   */
  export default {
    name:"ai-section",
    props: {
      type: String,
      title: String,
      size: {
        type: String,
        default: 'md'
      },
      bgTransparent: Boolean,
      bgColor: String
    },
    data() {
      return {
        
      };
    },
    computed: {
      bgStyle() {
        let bg = this.bgColor ? this.bgColor : "var(--white)"
        return this.bgTransparent ? "background-color:transparent;" : `background-color:${bg};`
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .ai-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $section-padding-v $section-padding-h;
    font-weight: $font-weight-bold;
    
    &.sm {
      padding: $section-padding-v * 0.5 $section-padding-h * 0.5;
    }
    &.lg {
      
    }
    
    &-decoration {
      margin-right: 6px;
      background-color: var(--brand-1);
      
      &.line {
        width: 4px;
        height: 12px;
        border-radius: 10px;
      }
      
      &.circle {
        width: 8px;
        height: 8px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
      }
      
      &.square {
        width: 8px;
        height: 8px;
        border-radius: 2px;
      }
    }
    .ai-section-title-content {
      font-size: $font-size-md;
      &.sm {
        // font-size: $font-size-sm;
      }
      &.lg {
        font-size: $font-size-lg;
      }
    }
  }
</style>